<script setup name="detailinform">
import { ref, reactive, onMounted, watch } from "vue";
import OAMain from "@/components/OAMain.vue";
import OADialog from "@/components/OADialog.vue";
import OAPagination from "@/components/OAPagination.vue";
import timeFormatter from "@/utils/timeFormatter";
import informHttp from "@/api/informHttp";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const route = useRoute()

let inform = reactive({
    title: "",
    content: '',
    create_time: '',
    last_time: '',
    author: {
        realname: '',
        department: {
            name: ''
        }
    }
})


onMounted(async () => {
    const pk = route.params.pk
    try {
        let data = await informHttp.getInformDetail(pk)
        Object.assign(inform, data)
    } catch (detail) {
        ElMessage.error(detail)
    }

    // 发送阅读请求
    await informHttp.readInform(pk)
})



</script>

<template>
    <OAMain title="通知详情">
        <el-card>
            <template #header>
                <div style="text-align: center;">
                    <h2 style="padding-bottom: 20px;">{{ inform.title }}</h2>
                    <div>
                        <span style="margin-right: 20px;">作者：{{ inform.author.realname }}</span>
                        <span>发布时间：{{ timeFormatter.stringFromDateTime(inform.create_time) }}</span>
                    </div>
                </div>
            </template>

            <template #default>
                <div v-html="inform.content" class="content" style="padding-left: 15px;">
                </div>
            </template>
            <template #footer>
                <div class="button-container">
                    <div style="text-align: left;">
                        阅读量：{{ inform.read_count }}
                    </div>
                    <div style="text-align: right;">
                        修改时间: {{ timeFormatter.stringFromDateTime(inform.last_time) }}
                    </div>
                </div>
            </template>
        </el-card>
    </OAMain>
</template>


<style scoped>
.button-container {
    display: flex;
    justify-content: space-between;
    /* 按钮分别对齐到容器的两侧 */
}

.content :deep(img) {
    max-width: 100%;
}




</style>